import Chapter1 from "./components/chapter1";
import Chapter2 from "./components/chapter2";
import Chapter3 from "./components/chapter3";
import Chapter4 from "./components/chapter4";
import Chapter5 from "./components/chapter5";
import Chapter6 from "./components/chapter6";
import Chapter7 from "./components/chapter7";
import Chapter8 from "./components/chapter8";
import Chapter9 from "./components/chapter9";
import Chapter10 from "./components/chapter10";
import Chapter11 from "./components/chapter11";
import Chapter12 from "./components/chapter12";
import Chapter13 from "./components/chapter13";
import Chapter14 from "./components/chapter14";
import Chapter15 from "./components/chapter15";
import Chapter16 from "./components/chapter16";
import Chapter17 from "./components/chapter17";
import Chapter18 from "./components/chapter18";

const App = () => {
    return (
        <>
            <div className='page-header'>
                <h1>
                    React Hooks <small>react中的hooks语法</small>
                </h1>
            </div>
            <div className='page-content'>
                <Chapter1 title='useState简介' />
                <Chapter2 title='useState中初始值返回函数定义' />
                <Chapter3 title='useRef获取DOM元素' />
                <Chapter4 title='useRef避免多次渲染' />
                <Chapter5 title='forwardRef结合useImperativeHandle获取函数组件信息' />
                <Chapter6 title='useImperativeHandle副作用函数' />
                <Chapter7 title='useEffect基本使用' />
                <Chapter8 title='useEffect模拟组件加载' />
                <Chapter9 title='useEffect模拟组件卸载' />
                <Chapter10 title='自定义Hooks' />
                <Chapter11 title='自定义Hooks获取热搜' />
                <Chapter12 title='useReducer的使用' />
                <Chapter13 title='useContext共享组件状态' />
                <Chapter14 title='性能优化React.memo' />
                <Chapter15 title='性能优化useMemo' />
                <Chapter16 title='性能优化useCallback' />
                <Chapter17 title='性能优化useTransition' />
                <Chapter18 title='性能优化useDeferredValue' />
            </div>
        </>
    );
};

export default App;
